<template>
	<view class="content">
		<!-- <view :class="tab == 1?'lan':'fen'" style="position: fixed; z-index: 9999; left: 175rpx; top: 10rpx; width: 400rpx; height: 80rpx; color: #fff; line-height: 75rpx;  padding: 1rpx; display: flex; border-radius: 45rpx;">
			<view @click="tab = 1" :class="tab == 1?'liwu':''" style="width: 197rpx; text-align: center; border-radius: 45rpx;">粉丝打赏榜</view>
			<view @click="tab = 2" :class="tab == 2?'liwu':''" style=" color: #fff; width: 197rpx;  text-align: center; border-radius: 45rpx;">选手礼物榜</view>
		</view>
		 -->
		
		<view class="top" v-if="tab == 1">
			<view class="img">
				<image src="../../static/assets/img/paihangbangdingtu2.png" style="width: 750rpx; height: 788rpx;"></image>
			</view>
			<view class="dier">
				<view v-if="list[1]">
					<view class="hg flexc">
						<image src="../../static/assets/img/dier.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="list[1].head_img" style="border: 3px #C2C2C2 solid;"></image>
						<view class="num2 flexc">{{list[1].points}}</view>
					</view>
					<view class="name flexc slh">{{list[1].nickname}}</view>
					<!-- <view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(list[1])"></image></view> -->
				</view>
			</view>
			<view class="diyi">
				<view  v-if="list[0]">
					<view class="hg flexc">
						<image src="../../static/assets/img/diyi.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="list[0].head_img" style="border: 3px #FFEFAA solid;"></image>
						<view class="num2 flexc">{{list[0].points}}</view>
					</view>
					<view class="name flexc slh">{{list[0].nickname}}</view>
					<!-- <view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(list[0])"></image></view> -->
				</view>
			</view>
			<view class="disan">
				<view  v-if="list[2]">
					<view class="hg flexc">
						<image src="../../static/assets/img/disan.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="list[2].head_img" style="border: 3px #E58E4B solid;"></image>
						<view class="num2 flexc">{{list[2].points}}</view>
					</view>
					<view class="name flexc slh">{{list[2].nickname}}</view>
					<!-- <view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(list[2])"></image></view> -->
				</view>
			</view>
		</view>
		<view class="center"  v-if="tab == 1">
			<view class="li flexci" v-for="(item,index) in list2" :key="item.id">
				<view class="num flexc">{{index+4}}</view>
				<view class="tx flexc slh">
					<image :src="item.head_img"></image>
				</view>
				<view class="name">{{item.nickname}}</view>
				<view class="shuzhi flexc"  style="flex-grow: 1;">
					<span>{{item.points}}</span>
					<view><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(item)"></image></view>
				</view>
			</view>
		</view>
		
		
		<view class="top" v-if="tab == 2">
			<view class="img">
				<image src="../../static/assets/img/nengliangbang2.png" style="width: 750rpx; height: 788rpx;"></image>
			</view>
			<view class="dier">
				<view v-if="listx[1]">
					<view class="hg flexc">
						<image src="../../static/assets/img/dier.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="listx[1].head_img" style="border: 3px #C2C2C2 solid;"></image>
						<view class="num2 flexc">{{listx[1].points}}</view>
					</view>
					<view class="name flexc slh">{{listx[1].name}}</view>
					<view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(listx[1])"></image></view>
				</view>
			</view>
			<view class="diyi">
				<view  v-if="listx[0]">
					<view class="hg flexc">
						<image src="../../static/assets/img/diyi.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="listx[0].head_img" style="border: 3px #FFEFAA solid;"></image>
						<view class="num2 flexc">{{listx[0].points}}</view>
					</view>
					<view class="name flexc slh">{{listx[0].name}}</view>
					<view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(listx[0])"></image></view>
				</view>
			</view>
			<view class="disan">
				<view  v-if="listx[2]">
					<view class="hg flexc">
						<image src="../../static/assets/img/disan.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="listx[2].head_img" style="border: 3px #E58E4B solid;"></image>
						<view class="num2 flexc">{{listx[2].points}}</view>
					</view>
					<view class="name flexc slh">{{listx[2].name}}</view>
					<view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(listx[2])"></image></view>
				</view>
			</view>
		</view>
		<view class="center" v-if="tab == 2">
			<view class="li flexci" v-for="(item,index) in list2x" :key="item.id">
				<view class="num flexc">{{index+4}}</view>
				<view class="tx flexc slh">
					<image :src="item.head_img"></image>
				</view>
				<view class="name">{{item.name}}</view>
				<view class="shuzhi flexcc" style="flex-grow: 1;">
					<span>{{item.points}}</span>
					<view><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(item)"></image></view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				list2:[],
				tab:2,
				listx:[],
				list2x:[],
				eventChannel:"",
				meile:false,
				meile2:false,
				page:1,
				page2:1
			}
		},
		onLoad(option) {
			if(option.val == 'dashang'){
				this.tab = 1
			}
		},
		onShow(option) {
			
			this.getlist()
			this.getlistx()
			this.eventChannel = this.getOpenerEventChannel();
		},
		onReachBottom() {
			if(this.meile){
				
			}else{
				this.page = ++ this.page;
				this.getlist()
			}
			if(this.meile2){
				
			}else{
				this.page2 = ++ this.page2;
				this.getlistx()
			}
			
			
			
		},
		methods: {
			getlist:function(){
				uni.$u.http.get(this.urlass + '/api/v1/group/gift/user',{
					params:{
						activity_id:uni.getStorageSync('activity_id'),
						token: uni.getStorageSync('token'),
						page:this.page,
						page_size:20,
						package_id:uni.getStorageSync('pack_id')
					}
				}).then(res => {
					if(res.data.data == '' || res.data.data.length < 20){
						this.meile = true
					}
					res.data.data.forEach(item=>{
						this.list.push(item)
					})
		
					this.list2 = this.list.filter((item,index)=>index>2)
				
				})
			},
			
			gos:function(item){
				console.log(item)
			
				let obj = {
					head_img:item.head_img,
					id: item.player_id,
					username: item.name
				}
				uni.setStorageSync('checkren',JSON.stringify(obj))
				this.$nextTick(item=>{
					this.eventChannel.emit('songliwu',1)
					uni.navigateBack()
				})
			},
			
			getlistx:function(){
				uni.$u.http.get(this.urlass + '/api/v1/group/gift/player',{
					params:{
						activity_id:uni.getStorageSync('activity_id'),
						token: uni.getStorageSync('token'),
						page:this.page2,
						page_size:20,
						package_id:uni.getStorageSync('pack_id')
					}
				}).then(res => {
					if(res.data.data == '' || res.data.data.length < 20){
						this.meile2 = true
					}
					res.data.data.forEach(item=>{
						this.listx.push(item)
					})
					
					this.list2x = this.listx.filter((item,index)=>index>2)
					
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
	    font-family: "shuzi"; /* Project id  */
	    src: url('../../static/assets/Black.TTF')
	}
	.content {
		.lan{ border: 1rpx #C2A5FF solid;
			.liwu{ background: #C2A5FF;}
		}
		.fen{ border: 1rpx #FF648C solid;
			.liwu{ background: #FF648C;}
		}
		.top {
			width: 750rpx;
			height: 584rpx;
			position: relative;

			.dier {
				position: absolute;
				left: 70rpx;
				top: 207rpx;
				text-align: center;
				
				.tx{
					image {
						width: 106rpx;
						height: 106rpx;
						border-radius: 106rpx;
						border: 3px #2979FF solid;
						
					}
				}
			}
			
			.diyi {
				position: absolute;
				left: 300rpx;
				top: 168rpx;
				text-align: center;
				
				.tx{
					image {
						width: 115rpx;
						height: 115rpx;
						border-radius: 115rpx;
						border: 3px #2979FF solid;
						
					}
				}
			}
			
			.disan {
				position: absolute;
				left: 540rpx;
				top: 205rpx;
				text-align: center;
				
				.tx{
					image {
						width: 106rpx;
						height: 106rpx;
						border-radius: 106rpx;
						border: 3px #2979FF solid;
						
					}
				}
			}

			.hg {
				position: relative;
				top: 8rpx;

				image {
					width: 47rpx;
					height: 36rpx;
				}
			}

			.tx { position: relative; 

			}
			.num2{
				position: absolute; bottom: -16rpx; left:50%;
				border-radius: 30rpx;
				padding: 2rpx 10rpx;
				font-weight: bold;
				background: #FFFFFF;
				color: #522FAE;
				font-size: 30rpx; font-family: 'shuzi';
				
			}

			.name {
				color: #FFFFFF;
				margin: 20rpx 0;
				font-size: 30rpx;
				width: 150rpx;
			}

			.num {
				text-shadow: 0px 4px 7px #3B0094;
				font-weight: bold;
				color: #FFFFFF;
				font-size: 50rpx; font-family: 'shuzi';
			}
		}

		.center { background: #FFFFFF; position: relative; top:-60rpx; border-radius:30rpx;
			.li {
				border-bottom: 1px #F2F2F2 solid;
				padding: 20rpx 0;

				.num {
					width: 100rpx;
					text-align: center;
					font-weight: 900;
					color: #522FAE;
					font-size: 29rpx; font-family: 'shuzi';
				}

				.tx {
					image {
						width: 82rpx;
						height: 82rpx;
						border-radius: 82rpx;
					}
				}

				.name {
					width: 420rpx;
					padding-left: 25rpx;
					text-align: left;
					font-size: 25rpx; font-weight:bold;
				}

				.shuzhi {
					span {
						padding: 15rpx 30rpx;
						background: rgba(86, 40, 166, 0.08);
						border-radius: 30rpx;
						color: #522FAE;
						font-weight: bold; font-family: 'shuzi';
					}
				}
			}

		}
	}
</style>
